<script setup>
import { ref, reactive, toRaw, computed } from 'vue';
import { service, cache } from '@utils';
import { ElMessage } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue';
import Upload from '@components/Upload';
import { SERVE_URL } from '@utils/config';

const emit = defineEmits(['refresh']);

defineProps({
    types: Array,
});

const visible = ref(false);
const formRef = ref();

const disabled = ref(false);
const coupons = ref();
const goodss = ref();
const homes = ref();
const categorys = ref();

const state = reactive({
    param: {},
});

const rules = {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    type: [{ required: true, message: '请选择', trigger: 'change' }],
    orderNum: [{ required: true, message: '请输入', trigger: 'blur' }],
    smallName: [{ required: true, message: '请输入', trigger: 'blur' }],
    showPic: [{ required: true, message: '请选择', trigger: 'blur' }],
    insidePic: [{ required: true, message: '请选择', trigger: 'blur' }],
};

const open = (item, disableValue) => {
    disabled.value = disableValue;
    state.param = { ...item };
    visible.value = true;
};

const close = () => {
    visible.value = false;
    state.param = {};
    disabled.value = false;
};
const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};
const realSubmit = async () => {
    const res = await service.homeActive.saveOrUpdate(toRaw(state.param));
    if (res) {
        ElMessage.success('修改成功');
        close();
        emit('refresh', !!state.param.id);
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" :title="!!state.param.id ? '修改' : '新增'" center :close-on-click-modal="false" @close="close" destroy-on-close width="70%" :top="isShowSkus ? '6vh' : '15vh'">
        <section style="max-height: 60vh" class="paddingR10" :class="isShowSkus && 'scroll-y '">
            <el-form :model="state.param" :rules="rules" ref="formRef" label-suffix=":" onsubmit="return false;" :disabled="disabled">
                <el-row :gutter="16">
                    <el-col :span="8">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="state.param.name" placeholder="请输入名称" clearable maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="state.param.type" style="width: 100%" placeholder="请选择类型" clearable>
                                <el-option v-for="{ label, value } in types" :key="value" :label="label" :value="value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序值" prop="orderNum">
                            <el-input-number v-model="state.param.orderNum" placeholder="请输入排序值" clearable :controls="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="state.param.type == 4">
                        <el-form-item label="小标签" prop="smallName">
                            <el-input v-model="state.param.smallName" placeholder="请输入小标签" clearable maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="['1', '2', '3', '6'].includes(state.param.type)">
                        <el-form-item label="主页显示图片" prop="showPic">
                            <upload v-model="state.param.showPic" show-tip />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="['1', '2', '3'].includes(state.param.type)">
                        <el-form-item label="内部显示图片" prop="insidePic">
                            <upload v-model="state.param.insidePic" show-tip />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
